<template>
    <el-button
        v-loading="loading"
        @click="destroy()"
        :icon="icon"
        type="danger">
        <slot v-if="$slots.default"></slot>
        <span v-else>删除</span>
    </el-button>
</template>

<script>
    export default {
        name: "index",
        props: {
            route: {
                type: String,
                required: true,
            },
            primary: {
                type: [String, Number],
                required: true,
            },
            icon: {
                type: String,
                default: '',
            }
        },
        data() {
            return {
                loading: false,
            }
        },
        methods: {
            destroy() {
                this.$confirm('删除后将无法恢复, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.loading = true;
                    this.$store.dispatch(this.route, this.primary).then(res => {
                        this.$message.success('删除成功!');
                        this.$emit('success');
                    }).finally(() => {
                        this.loading = false;
                    });
                });
            },
        },
        created() {
            // console.log(this.$slots.default)
        }
    }
</script>

<style scoped>
.inline-block {
    display: inline-block;
}
</style>
